<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start" (click)="gotohome()">
      <ion-icon name="arrow-back"></ion-icon>
    </ion-buttons>
    <ion-title>item</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
   <h3>基础用法</h3>
   <!-- Default Item -->
  <ion-item>
    <ion-label>
      Item
    </ion-label>
  </ion-item>
  
  <!-- Item as a Button -->
  <ion-item (click)="gotohome()">
    <ion-label>
      Button Item
    </ion-label>
  </ion-item>
  
  <!-- Item as an Anchor -->
  <ion-item href="https://www.ionicframework.com">
    <ion-label>
      Anchor Item
    </ion-label>
  </ion-item>

  <div>
    <p>color (设置item颜色)</p>
    <ion-item color="secondary">
     <ion-label>
      Secondary Color Item
     </ion-label>
    </ion-item>
  </div>
  
  <div>
   <p>detail (如果为true，则item上将显示详细箭头。 除非模式为ios并且存在href，onclick或button属性，否则默认为false。)</p>
   <ion-item detail>
    <ion-label>
       Standard Item with Detail Arrow
    </ion-label>
   </ion-item>
  </div>

  <div>
    <p>detailIcon (当detail设置为true时可以使用图标)</p>
    <ion-item detail detail-icon="checkmark-circle-outline">
      <ion-label>
        Standard Item with Detail Arrow
      </ion-label>
    </ion-item>
  </div>

  <div>
    <p>disabled="true" (如果为true，则用户无法与项目进行交互)</p>
    <ion-item detail detail-icon="checkmark-circle-outline" disabled="true">
        <ion-label>
          Standard Item with Detail Arrow
        </ion-label>
    </ion-item>
  </div>

  <div>
    <p>lines="full" | "inset" (如何显示边框)</p>
    <ion-item lines="inset">
      <ion-label>Item Lines Inset</ion-label>
    </ion-item>
    <ion-item lines="full">
      <ion-label>Item Lines Full</ion-label>
    </ion-item>
    <ion-item lines="none">
      <ion-label>Item Lines None</ion-label>
    </ion-item>
  </div>

  <h3>应用示例</h3>
  <ion-list>
      <ion-item class="items">
          <ion-thumbnail slot="start">
             <ion-img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2542867516.jpg"></ion-img>
          </ion-thumbnail>
          <ion-label>
            <h2>蜘蛛侠：平行宇宙</h2>
            <p>8.7</p>
          </ion-label>
          <ion-button fill="outline" slot="end">观看</ion-button>
      </ion-item>
      <ion-item class="items">
          <ion-thumbnail slot="start">
            <ion-img src="https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2520170117.jpg"></ion-img>
          </ion-thumbnail>
          <ion-label>
            <h2>三次元女友</h2>
            <p>6.2</p>
          </ion-label>
          <ion-button fill="outline" slot="end">观看</ion-button>
      </ion-item>
      <ion-item class="items">
            <ion-thumbnail slot="start">
              <ion-img src="https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2539661066.jpg"></ion-img>
            </ion-thumbnail>
            <ion-label>
              <h2>无名之辈</h2>
              <p>8.1</p>
            </ion-label>
            <ion-button fill="outline" slot="end">观看</ion-button>
      </ion-item>
  </ion-list>
</ion-content>
